<template lang="">
  <div>
    <!-- header -->
    <mt-header class="header" title="个人信息">
      <router-link to="#" slot="left">返回</router-link>
      <div slot="right">
        <router-link class="link" to="/login">登录</router-link>&nbsp;
        <router-link class="link" to="/register">注册</router-link>
      </div>
    </mt-header>
    
    <!-- mt-tabbar -->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">首页
        <img v-if="selected=='home'" slot="icon" src="../assets/icons/home_enable.png"/>
        <img v-else slot="icon" src="../assets/icons/home_disable.png"/>
      </mt-tab-item>
      <mt-tab-item id="me">我的
        <img v-if="selected=='me'" slot="icon" src="../assets/icons/me_enable.png"></img>
        <img v-else slot="icon" src="../assets/icons/me_disable.png"></img>
      </mt-tab-item>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected:'me'
    }
  },
  watch:{
    /*监视selected的变化*/ 
    selected(newVal,oldVal){
      // console.log(`newVal:${newVal} oldVal:${oldVal}`);

      if(newVal=='home'){
        this.$router.push('/');
      }
    }
  }
}
</script>
<style scoped>
  .link{
    color:white;
  }
</style>